// 折线图定制
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".line .chart"));

  // 渲染函数
  function render() {
    // 2. 指定配置和数据
    var option = {
      color: Config.colors.line,
      tooltip: {
        trigger: "axis"
      },
      legend: {
        right: "10%",
        textStyle: {
          color: "#4c9bfd"
        }
      },
      grid: {
        top: "20%",
        left: "3%",
        right: "4%",
        bottom: "3%",
        show: true,
        borderColor: "#012f4a",
        containLabel: true
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月"
        ],
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "rgba(255,255,255,.7)"
        },
        axisLine: {
          show: false
        }
      },
      yAxis: {
        type: "value",
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "rgba(255,255,255,.7)"
        },
        splitLine: {
          lineStyle: {
            color: "#012f4a"
          }
        }
      },
      series: [
        {
          name: "新增粉丝",
          type: "line",
          stack: "总量",
          smooth: true,
          data: Config.monthlyData.fans
        },
        {
          name: "新增游客",
          type: "line",
          stack: "总量",
          smooth: true,
          data: Config.monthlyData.visitors
        }
      ]
    };

    // 把配置给实例对象
    myChart.setOption(option);
  }

  // 初始渲染
  render();

  // 监听窗口大小变化
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  // 监听行业选择事件，可以更新线图数据
  EventBus.on("industrySelected", function(industry) {
    // 这里可以根据选择的行业更新线图数据
    // 模拟数据变化 - 实际应用中可以根据行业数据动态调整
    const newFans = Config.monthlyData.fans.map(val =>
      Math.round(val * (industry.value / 800))
    );

    myChart.setOption({
      series: [
        {
          data: newFans
        }
      ]
    });

    // 通知其他图表该行业被选中
    EventBus.emit("lineDataUpdated", {
      industry: industry,
      fans: newFans
    });
  });
})();
